<template>
  <div class="news">
    <header class="header">
      <div class="headerChild">
        <VanImage
          round
          width="48px"
          height="48px"
          src="https://res.vmallres.com/uomcdn/CN/cms/202204/98BEDD82D29BD48A04A32EA41578D573.png.50.webp"
        />
        <p>发布会</p>
      </div>
      <div class="headerChild">
        <VanImage
          round
          width="48px"
          height="48px"
          src="https://res.vmallres.com/uomcdn/CN/cms/202204/847355F1B844E9F1AD550801E7F73010.png"
        />
        <p>0元试用</p>
      </div>
      <div class="headerChild">
        <VanImage
          round
          width="48px"
          height="48px"
          src="https://res.vmallres.com/cmscdn/CN/2022-09/b6cf80b6d2b3435f89ca9ac2418af710.png.50.webp"
        />
        <p>V场景</p>
      </div>
      <div class="headerChild">
        <VanImage
          round
          width="48px"
          height="48px"
          src="https://res.vmallres.com/uomcdn/CN/cms/202204/C052D6F9341E565DE7F447554FEC3EA0.png.50.webp"
        />
        <p>好物圈</p>
      </div>
      <div class="headerChild">
        <VanImage
          round
          width="48px"
          height="48px"
          src="https://res.vmallres.com/cmscdn/CN/2022-09/bea745cf24e146a9bdddc13e6145ff75.png.50.webp"
        />
        <p>V探索</p>
      </div>
    </header>

    <!-- 热门资讯 -->
    <div class="mayLike">
      <h4 style="width: 100%; margin: 10px auto">热门资讯</h4>

      <!-- 调接口的数据 -->
      <div
        class="newsBox"
        :title="news.name"
        :key="news.id"
        v-for="news in allnews"
      >
        <div class="news">
          <img :src="dalImg(news.coverImage)" alt="" />
          <div class="newsName">{{ news.desc }}</div>
          <div class="newsPrice">{{ news.name }}</div>
          <div class="point"></div>
        </div>
      </div>
      <p class="noMore">没有更多数据</p>
    </div>
    <MayLike></MayLike>
  </div>
</template>

<script setup>
import { Image as VanImage } from "vant";
import { ref } from "vue";
import { loadNews } from "../services/news.js";
import MayLike from "../components/MayLike.vue";
import { dalImg } from "../utils/tools";

const allnews = ref([]);
const page = ref(1);

//发送请求获取商品

//发送请求获取商品
const loadnews = () => {
  loadNews(page.value).then((res) => {
    console.log(res.data);
    allnews.value.push(...res.data);
    page.value++;
  });
};
loadnews();

function scrollFn() {
  //获取网页的总高度
  var htmlHeight =
    document.body.scrollHeight || document.documentElement.scrollHeight;
  //clientHeight是网页在浏览器中的可视高度
  var clientHeight =
    document.body.clientHeight || document.documentElement.clientHeight;
  //scrollTop是浏览器滚动条的top位置
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  //判断到底部了
  // console.log(scrollTop + clientHeight, htmlHeight);
  if (scrollTop + clientHeight > htmlHeight - 50) {
    page.value++; // 页码+1
    loadnews();
  }
}

// 监听滚动事件实现下拉刷新
window.onscroll = debounce(scrollFn, 200);

// ******防抖函数封装
function debounce(fn, delay) {
  let timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
  p {
    font-size: 12px;
    text-align: center;
    color: #666;
  }
}

.mayLike {
  display: flex;
  flex-wrap: wrap;
  width: 94%;
  justify-content: space-between;
  margin: 10px auto;
  padding-bottom: 80px;
  // place-items: center center;
  // grid-template-columns: 50% 50%;
  .newsBox {
    width: 48.8%;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    .news {
      padding-top: 15px;
      text-align: center;
      img {
        width: 132px;
        height: 132px;
      }
      .newsName {
        height: 36px;
        margin: 10px auto;
        line-height: 18px;
        width: 160px;
        text-align: start;
        font-size: 13px;
        font-weight: bold;
        overflow: hidden;
      }
      .newsPrice {
        margin: 0 auto;
        width: 160px;
        text-align: start;
        font-size: 12px;
        font-weight: bold;
        color: #666;
      }
      .point {
        margin: 9px auto 15px auto;
        width: 160px;
        text-align: start;
        font-size: 12px;
        color: rgb(207, 10, 44);
        span {
          border: 1px solid rgb(206, 110, 126);
          border-radius: 3px;
        }
      }
    }
  }
  .noMore {
    // text-align: center;
    // margin-top: 50px;
    color: #888;
    margin: 0 auto;
  }
}
</style>
